<template>
  <view class="container">
    
    <!-- 统计卡片 -->
    <view class="stat-cards">
      <view class="stat-card income-card">
        <view class="stat-label">总收入</view>
        <view class="stat-value">¥{{ statistics.totalIncome || 0 }}</view>
      </view>
      
      <view class="stat-card expense-card">
        <view class="stat-label">总支出</view>
        <view class="stat-value">¥{{ statistics.totalExpense || 0 }}</view>
      </view>
      
      <view class="stat-card balance-card">
        <view class="stat-label">结余</view>
        <view class="stat-value">¥{{ statistics.balance || 0 }}</view>
      </view>
    </view>
    
    <!-- 提示信息 -->
    <view class="tips">
      <text class="tips-text">💡 数据为所有记录的汇总统计</text>
    </view>
    
  </view>
</template>

<script>
import api from '@/utils/api.js';

export default {
  data() {
    return {
      statistics: {
        totalIncome: 0,
        totalExpense: 0,
        balance: 0
      }
    };
  },
  
  onLoad() {
    this.loadStatistics();
  },
  
  onShow() {
    this.loadStatistics();
  },
  
  methods: {
    async loadStatistics() {
      try {
        uni.showLoading({ title: '加载中...' });
        const res = await api.getStatistics();
        this.statistics = res.data;
        uni.hideLoading();
      } catch (error) {
        console.error('加载统计数据失败：', error);
        uni.hideLoading();
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.stat-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.stat-card {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.income-card {
  background: linear-gradient(135deg, #1aad19 0%, #4cd964 100%);
  color: #fff;
}

.expense-card {
  background: linear-gradient(135deg, #e64340 0%, #ff6b6b 100%);
  color: #fff;
}

.balance-card {
  background: linear-gradient(135deg, #3c9cff 0%, #5cadff 100%);
  color: #fff;
}

.stat-label {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 15rpx;
}

.stat-value {
  font-size: 48rpx;
  font-weight: bold;
}

.tips {
  margin-top: 40rpx;
  text-align: center;
}

.tips-text {
  font-size: 26rpx;
  color: #999;
}
</style>



